<!DOCTYPE html>
<html>

<head>

  <!--
    The IE Compatibility flag, while not always necessary, makes sure your page
    will always load in IE11+ rendering mode instead of being limited to IE7
    features and behaviors. While IE11 is still relatively old as a rendering
    engine, it supports the most fundamental parts needed for modern webpages to
    function correctly.

    Neutron will do its best to enable IE11+ rendering mode regardless of this
    tag, but in current releases pages will not render correctly when compiled
    unless this tag is present. Because of that and other edge cases, any page
    you write to load in Neutron should contain this meta tag.
  -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <link href="bootstrap.min.css" rel="stylesheet">
  <script src="jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>

  <style>
    html,
    body {
      width: 100%;
      height: 100%;
    }

    .title-btn {
      padding: 0.35em 1.0em;
      cursor: pointer;
      vertical-align: bottom;
      font-family: Webdings;
      font-size: 11pt;
    }

    .title-btn:hover {
      background: rgba(0, 0, 0, .2);
    }

    .title-btn-close:hover {
      background: #dc3545;
    }
  </style>
</head>

<body class="d-flex flex-column">

  <!-- Title Bar -->
  <header>
    <div class="d-flex align-items-stretch bg-dark text-white">
      <span class="flex-grow-1 px-2 py-1" onmousedown="neutron.DragTitleBar()">AutoHotkey</span>
      <span class="title-btn" onclick="neutron.Minimize()">0</span>
      <span class="title-btn" onclick="neutron.Maximize()">1</span>
      <span class="title-btn title-btn-close" onclick="neutron.Close()">r</span>
    </div>
  </header>
  <!-- End Title Bar -->

  <!-- Window Contents -->
  <div class="flex-grow-1 d-flex">

    <!-- Sidebar -->
    <div class="nav flex-column nav-pills bg-dark text-light" id="v-pills-tab" role="tablist"
      aria-orientation="vertical">
      <a class="nav-link text-light active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
        aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link text-light" id="v-pills-buttons-tab" data-toggle="pill" href="#v-pills-buttons" role="tab"
        aria-controls="v-pills-buttons" aria-selected="false">Buttons</a>
      <a class="nav-link text-light" id="v-pills-forms-tab" data-toggle="pill" href="#v-pills-forms" role="tab"
        aria-controls="v-pills-forms" aria-selected="false">Forms</a>
      <a class="nav-link text-light" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
        aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
    <!-- End Sidebar -->

    <!-- Page Content -->
    <div class="flex-grow-1 overflow-auto">
      <div class="tab-content container p-2" id="v-pills-tabContent">

        <!-- v-pills-home -->
        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
          <h1>Welcome to Neutron</h1>
          <p>
            Neutron provides a powerful set of tools for build HTML-based user interfaces with AutoHotkey. It leverages
            the Trident engine, known for its use in Internet Explorer, because of its deep integration with the
            Microsoft Windows operating system and its wide availability across systems.
          </p>
          <p>
            This example is designed to show how you can use third party frameworks like Bootstrap to build advanced
            user interfaces, while still keeping all the code local. This script can be compiled and still function
            fine without the need to extract any files to a temporary directory.
          </p>
          <p>
            As this example is more advanced, it assumes a stronger familiarity with the technology and may gloss over
            some parts more than other examples. If you're just getting started it may be helpful to work with some of
            the other example scripts first.
          </p>
        </div>
        <!-- End v-pills-home -->

        <!-- v-pills-buttons -->
        <div class="tab-pane fade" id="v-pills-buttons" role="tabpanel" aria-labelledby="v-pills-buttons-tab">
          <h1>Buttons!</h1>

          <h2>Colored Buttons:</h2>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-primary">Primary</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-secondary">Secondary</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-success">Success</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-danger">Danger</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-warning">Warning</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-info">Info</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-light">Light</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-dark">Dark</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-link">Link</button>

          <h2>Outline Buttons:</h2>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-outline-primary">Primary</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-outline-secondary">Secondary</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-outline-success">Success</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-outline-danger">Danger</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-outline-warning">Warning</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-outline-info">Info</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-outline-light">Light</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-outline-dark">Dark</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-outline-link">Link</button>

          <h2>Block Buttons:</h2>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-block btn-primary">Block level
            button</button>
          <button type="button" onclick="ahk.Button(event)" class="btn btn-block btn-outline-primary">Block level
            button</button>

        </div>
        <!-- End v-pills-buttons -->

        <!-- v-pills-forms -->
        <div class="tab-pane fade" id="v-pills-forms" role="tabpanel" aria-labelledby="v-pills-forms-tab">
          <h1>Forms!</h1>
          <form onsubmit="ahk.Submit(event)">
            <div class="form-row">
              <div class="form-group col-md-6">
                <label for="inputEmail">Email</label>
                <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
              </div>
              <div class="form-group col-md-6">
                <label for="inputPassword">Password</label>
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
              </div>
            </div>
            <div class="form-group">
              <label for="inputAddress">Address</label>
              <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
            </div>
            <div class="form-group">
              <label for="inputAddress2">Address 2</label>
              <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
            </div>
            <div class="form-row">
              <div class="form-group col-md-6">
                <label for="inputCity">City</label>
                <input type="text" class="form-control" id="inputCity">
              </div>
              <div class="form-group col-md-4">
                <label for="inputState">State</label>
                <select id="inputState" class="form-control">
                  <option selected>Choose...</option>
                  <option>...</option>
                </select>
              </div>
              <div class="form-group col-md-2">
                <label for="inputZip">Zip</label>
                <input type="text" class="form-control" id="inputZip">
              </div>
            </div>
            <div class="form-group">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="gridCheck">
                <label class="form-check-label" for="gridCheck">
                  Check me out
                </label>
              </div>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
          </form>
        </div>
        <!-- End v-pills-forms -->

        <!-- v-pills-settings -->
        <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
          Settings
        </div>
        <!-- End v-pills-settings -->

      </div>
    </div>
    <!-- End Page Contents -->

  </div>
  <!-- End Window Contents -->

</body>

</html>